<template>
	<view class="home-page">
		<view class="login-bg1">
			<image src="../../static/home/home-top.png" mode="widthFix"></image>
		</view>
		<view class="banner">
			<u-swiper :list="bannerList" height="88" radius="10" imgMode="scaleToFill"></u-swiper>
		</view>
		<!-- 	<view class="good-list">
			<image class="title" @click="goswto('/pages/shop/index')" src="../../static/home/home-title1.png"
				mode="widthFix"></image>
			<scroll-view scroll-x="true" class="scroll-container" show-scrollbar="false">
				<view class="goods">
					<view class="goods-item" v-for="(item,index) in goodslist" @click="goDetails(item.id)" :key="index">
						<image :src="item.logo" mode="aspectFill"></image>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<view class="notice">
			<u-notice-bar mode="link" :text="textList" keyName="title" direction="column" bgColor="#222223"
				color="#ffffff" @click="goNotice"></u-notice-bar>
		</view>
		<view class="record">
			<view class="record-item" v-for="(item,index) in recordList" :key="index" @click="gonavto(item.url)">
				<image :src="item.img" mode="heightFix"></image>
				<view class="record-text">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="tabs">
			<view :class="current == index?'active-item': 'tabs-item'" class="tabs-item"
				v-for="(item,index) in tabsList" :key="index" @click="cutTab(index,iid)">
				{{item.name}}
			</view>
		</view>
		<view class="panic" v-for="(item,index) in list" :key="index">
			<view class="panic-box">
				<image :src="item.logo" mode=""></image>
				<view class="panic-right">
					<view class="panic-title">
						{{item.name}}
					</view>
					<view class="income-box">
						<view class="income">
							<view class="income-title">
								价值
							</view>
							<view class="income-text">
								{{item.price}}
							</view>
						</view>
						<view class="income">
							<view class="income-title">
								周收益率
							</view>
							<view class="income-text">
								{{item.rate_days}}
							</view>
						</view>
					</view>
					<view class="income-box">
						<view class="income">
							<view class="income-title">
								收益价值
							</view>
							<view class="income-text">
								{{item.reward}}
							</view>
						</view>
						<view class="income">
							<view class="income-title">
								赠商品币
							</view>
							<view class="income-text">
								{{item.give_balance}}
							</view>
						</view>
					</view>
					<view class="panic-bottom">
						<view class="time">
							{{item.time_slot}}
						</view>
						<view class="bottom-right" v-if="item.success == 3">
							<view class="points-btn"
								style="background:linear-gradient(254.51deg, #FFF0E3 3.64%, #D7B39A 86.71%);">
								待开放
							</view>
						</view>
						<view class="bottom-right" v-else>
							<view class="points-btn"
								style="background:linear-gradient(254.51deg, #FFF0E3 3.64%, #D7B39A 86.71%);"
								v-if="item.p_status == 1" @click="getyuyue(item)">
								立即预约
							</view>
							<view class="points-btn" style="background: #EFD5D5;" v-if="item.p_status == 2">
								已预约
							</view>
							<view class="points-btn"
								style="background:linear-gradient(254.51deg, #FFF0E3 3.64%, #D7B39A 86.71%);"
								v-if="item.p_status == 3">
								准备开奖
							</view>
							<view class="points-btn"
								style="background:linear-gradient(254.51deg, #FFF0E3 3.64%, #D7B39A 86.71%);"
								v-if="item.p_status == 4" @click="goqg(item)">
								开奖中
							</view>
							<view class="points-btn"
								style="background:linear-gradient(254.51deg, #FFF0E3 3.64%, #D7B39A 86.71%);"
								v-if="item.p_status == 5">
								升值中
							</view>
							<view class="points-btn"
								style="background:linear-gradient(254.51deg, #FFF0E3 3.64%, #D7B39A 86.71%);"
								v-if="item.p_status == 6">
								抢购中
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<!-- <u-empty v-else mode="car" icon="../../static/home/none.png" text="暂无数据" marginTop="50">
		</u-empty> -->
		<u-popup :show="show" bgColor="transparent" @close="close" mode="center" round="30">
			<view class="pop" v-if="status == 1">
				<view class="success">
					<image class="cg-title" src="../../static/home/cg-title.png" mode="widthFix"></image>
					<image class="head" :src="backInfo.logo" mode=""></image>
					<view class="panic-pop">
						<view class="panic-title">
							{{backInfo.name || '商品1号'}}
						</view>
						<view class="panic-info">
							<view class="income">
								<view class="income-title">
									拍卖收益
								</view>
								<view class="income-text">
									{{backInfo.validity_time || '7/1.42%'}}
								</view>
							</view>
							<view class="income">
								<view class="income-title">
									到期收益
								</view>
								<view class="income-text">
									{{backInfo.rate || '99.4-695.8'}}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-btn">
						<u-button shape="circle" color="linear-gradient(0deg, #FF4A4A, #FF4A4A)" type="primary"
							text="我知道了" size="large" @click="close"></u-button>
					</view>
				</view>
			</view>
			<view class="bg-fail" v-if="status == 2">
				<view class="fail">
					<image class="cg-title" src="../../static/home/sb-title.png" mode="widthFix"></image>
					<image class="head" :src="backInfo.logo" mode=""></image>
					<view class="panic-pop">
						<view class="panic-title">
							{{backInfo.name || '商品1号'}}
						</view>
						<view class="panic-info">
							<view class="income">
								<view class="income-title">
									拍卖收益
								</view>
								<view class="income-text">
									{{backInfo.validity_time || '7/1.42%'}}
								</view>
							</view>
							<view class="income">
								<view class="income-title">
									到期收益
								</view>
								<view class="income-text">
									{{backInfo.rate || '99.4-695.8'}}
								</view>
							</view>
						</view>
					</view>
					<view class="pop-btn">
						<u-button shape="circle" color="linear-gradient(0deg, #090B08, #090B08)" type="primary"
							text="我知道了" size="large" @click="close"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				textList: [],
				tabsList: [],
				goodslist: [],
				show: false,
				status: 1,
				page: 1,
				list: [],
				timer: null,
				backInfo: {},
				id: '',
				current: 0,
				statuslist: 'loadmore',
				recordList: [{
						img: '/static/home/home-icon (1).png',
						text: '藏品',
						url: ''
					},
					{
						img: '/static/home/home-icon (3).png',
						text: '闪兑',
						url: ''
					},
					{
						img: '/static/home/home-icon (4).png',
						text: '钱包',
						url: '/pages/my/wallet/index'
					},
					{
						img: '/static/home/home-icon (2).png',
						text: '充值',
						url: '/pages/my/top_up/index'
					}
				],
			}
		},
		onShow() {
			this.page = 1
			this.postswiper()
			this.postnotice()
			this.getlist()
			this.postinfo()
			this.posttabs()
		},
		onReachBottom() {
			this.page++
			this.statuslist = 'loading';
			this.postlist()
		},
		onUnload() {
			if (this.timer) clearInterval(this.timer);
		},
		methods: {
			gonavto(url){
				uni.navigateTo({
					url: url
				})
			},
			cutTab(index, id) {
				this.current = index
				this.id = id
				this.page = 1
				this.postlist()
			},
			posttabs() {
				this.$Request({
					method: 'POST',
					url: '/api/index/catelist',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.tabsList = res.data
						this.id = this.tabsList[0].id
						this.postlist()
					}
				})
			},
			postinfo() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/index/verifyMutual',
					data: params,
					ismsg: false,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						if (res.data.result == 1) {
							clearInterval(this.timer);
							this.backInfo = res.data.info
							this.status = 1
							this.show = true
						} else if (res.data.result === -1) {
							clearInterval(this.timer);
							this.backInfo = res.data.info
							this.status = 2
							this.show = true
						}
					}
				})
			},
			goqg(item) {
				let params = {
					id: item.id
				}
				this.$Request({
					method: 'POST',
					url: '/api/index/AppointmentMatching',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.getlist()
						// 定时请求结果
						this.timer = setInterval(() => {
							this.postinfo();
						}, 5000);
					}
				})
			},
			getyuyue(item) {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否确定预约！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								mask: true
							})
							let params = {
								id: item.id
							}
							app.$Request({
								method: 'POST',
								url: '/api/index/appoint',
								data: params,
								ismsg: true,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									app.getlist()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getlist() {
				this.$Request({
					method: 'POST',
					url: '/api/index/index',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.morning
					}
				})
			},
			goswto(url) {
				uni.switchTab({
					url: url
				})
			},
			postnotice() {
				this.$Request({
					method: 'POST',
					url: '/api/index/indexNoticeList',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						res.data.map(item => {
							this.textList.push(item.title)
						})
					}
				})
			},
			postswiper() {
				this.$Request({
					method: 'POST',
					url: '/api/index/swiper',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.bannerList = res.data.list
					}
				})
			},
			postlist() {
				this.$Request({
					method: 'POST',
					url: '/api/index/goodsList',
					data: {
						id: this.id,
						page: 1
					},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						if (res.data.list.length < 10) {
							this.statuslist = 'nomore';
						}
						if (this.page == 1) {
							this.goodslist = res.data.list
						} else {
							this.goodslist = [...this.goodslist, ...res.data.list]
						}
					}
				})
			},
			goNotice() {
				uni.navigateTo({
					url: '/pages/index/notice/index'
				})
			},
			close() {
				this.show = false

				uni.navigateTo({
					url: '/pages/my/buy_record/index'
				})
			},
			goDetails(id) {
				uni.navigateTo({
					url: '/pages/shop/details/index?id=' + id
				})
			}
		}
	}
</script>

<style>
	page {
		background: #000000;
	}
</style>
<style lang="scss" scoped>
	.home-page {
		min-height: 100vh;
		background-image: url('../../static/login/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 593px;
		padding: 30rpx;
		position: relative;

		.good-list {
			padding: 20rpx;
			margin-top: 30rpx;
			background-image: url('../../static/home/home-icon1.png');
			background-repeat: no-repeat;
			background-size: 100% 100px;
			border-radius: 20rpx;
			background-color: #fff;

			.title {
				width: 100%;
				height: 153rpx;
				/* 修改单位从px到rpx */
				margin-bottom: 20rpx;
			}

			.scroll-container {
				width: 100%;
				white-space: nowrap;
				/* 关键：实现横向滚动 */
				padding-bottom: 10rpx;
				/* 给滚动条留空间 */

				.goods {
					display: inline-flex;
					/* 关键：横向排列 */
					flex-wrap: nowrap;

					.goods-item {
						display: inline-block;
						/* 关键：横向排列 */
						width: 100px;
						/* 固定宽度替代百分比 */
						margin-right: 20rpx;
						/* 替代space-between */
						box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);
						vertical-align: top;

						&:last-child {
							margin-right: 0;
							/* 最后一个元素去掉右边距 */
						}

						image {
							width: 100%;
							height: 100px;
							border-radius: 30rpx;
							/* 简写语法 */
							display: block;
							/* 消除图片底部间隙 */
						}
					}
				}
			}
		}

		.login-bg1 {
			width: 200px;
			padding-top: 30rpx;

			image {
				width: 200px;
				height: 80px;
			}
		}

		.bg-fail {
			width: 100vw;
			height: 450px;
			padding: 30rpx;
			background-image: url('../../static/home/sb-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 450px;

			.fail {
				width: 100%;
				height: 450px;
				background-image: url('../../static/home/fail.png');
				background-size: 100% 100%;
				position: relative;

				.cg-title {
					width: 140px;
					height: 82px;
					position: absolute;
					right: 17%;
					top: 16%;
				}

				.head {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					position: absolute;
					left: 17%;
					top: 10%;
					border: 4px solid rgba(255, 255, 255, 1);
					background: rgba(217, 217, 217, 1);
					box-shadow: 13px 8px 11.8px 0px rgba(74, 0, 0, 0.25);
					transform: rotate(-6.29deg);
				}

				.pop-btn {
					position: absolute;
					width: 65%;
					left: 0;
					right: 0;
					margin: auto;
					bottom: 20%;
				}

				.panic-pop {
					width: 65%;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #fff;
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					top: 40%;

					.panic-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #8F8F8F;
						border-bottom: 1rpx solid #eeeeee;
						padding-bottom: 20rpx;
					}

					.panic-info {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.income {
							font-size: 24rpx;
							margin-top: 10rpx;

							.income-title {
								color: #8F8F8F;
								padding: 5rpx 10rpx;
							}

							.income-text {
								color: #8F8F8F;
								font-weight: 900;
								font-size: 32rpx;
								padding: 5rpx 10rpx;

							}
						}

					}


				}
			}
		}

		.pop {
			width: 100vw;
			height: 450px;
			padding: 30rpx;
			background-image: url('../../static/home/cg-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 450px;

			.success {
				width: 100%;
				height: 450px;
				background-image: url('../../static/home/success.png');
				background-size: 100% 100%;
				position: relative;

				.cg-title {
					width: 140px;
					height: 82px;
					position: absolute;
					right: 17%;
					top: 16%;
				}

				.head {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					position: absolute;
					left: 17%;
					top: 10%;
					border: 4px solid rgba(255, 255, 255, 1);
					background: rgba(217, 217, 217, 1);
					box-shadow: 13px 8px 11.8px 0px rgba(74, 0, 0, 0.25);
					transform: rotate(-6.29deg);
				}

				.pop-btn {
					position: absolute;
					width: 65%;
					left: 0;
					right: 0;
					margin: auto;
					bottom: 20%;
				}

				.panic-pop {
					width: 65%;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #fff;
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					top: 40%;

					.panic-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #000000;
						border-bottom: 1rpx solid #eeeeee;
						padding-bottom: 20rpx;
					}

					.panic-info {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.income {
							font-size: 24rpx;
							margin-top: 10rpx;

							.income-title {
								color: #333333;
								padding: 5rpx 10rpx;
							}

							.income-text {
								color: rgba(255, 37, 56, 1);
								font-weight: 900;
								font-size: 32rpx;
								padding: 5rpx 10rpx;
							}
						}

					}


				}
			}
		}

		.banner {
			margin-top: 30rpx;
		}

		.record {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.record-item {
				width: 30%;
				text-align: center;
				position: relative;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				.record-text {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #fff;
				}
			}
		}

		.notice {
			margin-top: 30rpx;
			padding: 10rpx 15rpx;
			background-color: #222223;
			border-radius: 20rpx;
		}

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 20rpx;
			border: 1px solid #404040;
			padding: 10rpx;
			margin-top: 30rpx;

			.tabs-item {
				width: 33%;
				font-size: 26rpx;
				font-weight: 500;
				color: #8F8F8F;
				text-align: center;
				padding: 20rpx 0;
			}

			.active-item {
				background-color: #FFFFFF;
				border-radius: 10rpx;
				color: #000000;
			}
		}

		.panic {
			margin-top: 30rpx;
			background-color: #1A1A1B;
			border-radius: 20rpx;

			.panic-box {
				display: flex;
				padding: 30rpx;

				image {
					width: 150px;
					height: 180px;
					border-radius: 30rpx;
				}

				.panic-right {
					width: 60%;
					margin-left: 20rpx;

					.panic-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #ffffff;
					}

					.income-box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 10rpx;

						.income {
							font-size: 24rpx;
							margin-top: 10rpx;

							.income-title {
								color: #8F8F8F;
								padding: 5rpx 10rpx;
							}

							.income-text {
								color: #ffffff;
								padding: 5rpx 10rpx;
							}
						}
					}


					.panic-bottom {
						width: 100%;
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background: linear-gradient(254.51deg, rgba(255, 240, 227, 0.15) 3.64%, rgba(215, 179, 154, 0.15) 86.71%);
						border-radius: 20rpx;

						.time {
							color: #FFD7A2;
							font-size: 26rpx;
							padding-left: 30rpx;
						}

						.bottom-right {

							.points-btn {
								text-align: center;
								padding: 15rpx 20rpx;
								color: #633C1C;
								border-radius: 10rpx;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}

	}
</style>